/**
 * 文件拖拽上传
 * 拖拽事件最低支持ie10
 */

class DropUpload {
  //要想实现拖拽，首页需要阻止浏览器默认行为，一个四个事件。
  stopDefaultEvent(domElement) {
    let dom = domElement || document
    dom.addEventListener('dragleave', function(e) {
      //拖离
      e.preventDefault()
    })
    dom.addEventListener('drop', function(e) {
      //拖进
      e.preventDefault()
    })
    dom.addEventListener('dragover', function(e) {
      //拖来拖去
      e.preventDefault()
    })
    dom.addEventListener('drap', function(e) {
      e.preventDefault()
    })
    dom.addEventListener('dragenter', function(e) {
      e.preventDefault()
    })
    dom.addEventListener('dragend', function(e) {
      e.preventDefault()
    })
  }

  // 绑定拖拽上传事件
  bindDropEvent(dom, callBack) {
    //================上传的实现
    dom.addEventListener(
      'drop',
      function(e) {
        e.preventDefault() //取消默认浏览器拖拽效果

        let fileList = e.dataTransfer.files //获取文件对象
        //fileList.length 用来获取文件的长度（其实是获得文件数量）

        //检测是否是拖拽文件到页面的操作
        if (fileList.length == 0) {
          return
        }
        callBack(fileList)
      },
      false
    )
  }
}

export default DropUpload
